<template>
  <div class="flex justify-end segment-list-box">
    <div
      v-for="i in portStatus"
      :key="i.value"
      class="port-status-list mr-10"
      :class="'color-' + i.value.toLowerCase()"
    >
      {{ i.label }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      portStatus: [
        {
          label: "空闲",
          value: "IDLE",
        },
        {
          label: "成端",
          value: "CONN",
        },
        {
          label: "主用",
          value: "MAIN",
        },
        {
          label: "备用",
          value: "BACKUP",
        },
        {
          label: "占用",
          value: "OCCUPY",
        },
        {
          label: "损坏",
          value: "DAMAGE",
        },
        {
          label: "进行中",
          value: "PROCESS",
        },
      ],
    };
  },
  mounted() {
    // console.log('触发了')
  },
};
</script>
<style lang="scss" scoped>
.segment-list-box {

  .color-select {
    color: #fff;
    background-color: #409EFF;
  }

  .color-conn {
    color: #fff;
    background-color: #339933;
  }

  .color-main {
    color: #fff;
    background-color: #ffcc33;
  }

  .color-backup {
    color: #fff;
    background-color: #3399cc;
  }

  .color-occupy {
    color: #fff;
    background-color: #ff7f00;
  }

  .color-damage {
    color: #fff;
    background-color: #cc3333;
  }

  .color-process {
    color: #fff;
    background-color: #bbb;
  }

  .hover-row {

    .color-conn {
      color: #339933;
    }

    .color-main {
      color: #ffcc33;
    }

    .color-backup {
      color: #3399cc;
    }

    .color-occupy {
      color: #ff7f00;
    }

    .color-damage {
      color: #cc3333;
    }

    .color-process {
      color: #bbb;
    }
  }
}
.port-status-list {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #ebeef5;
}
</style>
